<template>
  <wrap class="bottomWrap">
    <div class="bottomWrapCotent">
      <div class="bottomLeft">
        <comTitle>
          <template #title> 环境空气状态 </template>
        </comTitle>
        <div class="end-box flex">
          <div class="center_chart">
            <div id="Gas"></div>
          </div>
          <div class="end-right">
            <div
              class="flex-around"
              style="height: 20%"
              v-for="(item, index) in chart3d"
              :key="item.name"
            >
              <div class="flex-start">
                <div :class="`spot${index}`"></div>
                <span class="fs-12 cr-hui3">{{ item.name }}</span>
              </div>
              <div>
                <span
                  class="fs-20 cr-blue familyD"
                  :style="{
                    color: item.color,
                  }"
                  v-if="item.name === '超标率'"
                  >{{ outexceed.notPassNum }}</span
                >
                <span
                  :style="{
                    color: item.color,
                  }"
                  class="fs-20 cr-blue familyD"
                  v-else
                  >{{ 100 - outexceed.notPassNum }}</span
                >
                <span class="fs-14 cr-hui4 ml-12">%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottomline"></div>
      <div class="bottomRight">
        <comTitle>
          <template #title> 设备状态统计 </template>
        </comTitle>
        <div class="echart_right flex">
          <div class="center_chart">
            <echartData
              :wasteTypewuran="wasteTypewuran"
              :sum="deviceData.sumNum"
              :width="90"
              :height="90"
            ></echartData>
          </div>
          <div class="data-right flex-column">
            <div class="sum cr-hui fs-16 flex-center mb-16">
              总计：<span class="familyD fs-24 pl-16 pr-16">{{
                deviceData.sumNum
              }}</span
              >台
            </div>
            <div class="data-end-right">
              <div
                class="flex mb-10 status"
                v-for="item in scaleData"
                :key="item.name"
              >
                <div class="flex-start">
                  <div
                    class="spotBig"
                    :style="{
                      'background-color': item.bg,
                    }"
                  >
                    <div
                      :class="`spot`"
                      :style="{
                        'background-color': item.color,
                      }"
                    ></div>
                  </div>
                  <span class="fs-12 cr-hui3">{{ item.name }}</span>
                </div>
                <div>
                  <span
                    class="fs-20 cr-blue familyD"
                    :style="{
                      color: item.color,
                    }"
                    >{{ deviceData[item.value] }}</span
                  >
                  <span class="fs-14 cr-hui4 ml-12">台</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </wrap>
</template>

<script>
export default {
  props: ["scaleData", "deviceData", "outexceed"],
  components: {
    echartData: () => import("./echartData"),
  },
  data() {
    return {
      wasteTypewuran: {},
      chart3d: [
        {
          name: "达标率",
          value: 20,
          color: "#73a8ff",
        },
        {
          name: "超标率",
          value: 80,
          color: "#ff779b",
        },
      ],
    };
  },
  created() {},
  mounted() {
    this.get3dChart();
    this.ititDevice();
  },
  methods: {
    /* 设备统计状态 */
    ititDevice() {
      var that = this;
      let data = [];
      for (var i = 0; i < this.scaleData.length; i++) {
        if (this.deviceData[this.scaleData[i].value] > 0) {
          data.push(
            {
              value: this.deviceData[this.scaleData[i].value],
              name: this.scaleData[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  shadowBlur: 8,
                  borderColor: this.scaleData[i].color,
                  shadowColor: this.scaleData[i].bg,
                },
              },
              label: {
                show: false,
                color: this.scaleData[i].color,
              },
              labelLine: {
                length: 6,
                show: false,
                lineStyle: {
                  color: this.scaleData[i].color,
                },
              },
            },
            {
              value:
                this.scaleData.length > 1 &&
                this.deviceData.sumNum !==
                  this.deviceData[this.scaleData[i].value]
                  ? 1
                  : 0,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 10,
                },
              },
            }
          );
        }
        if (this.scaleData.length - 1 === i) {
          this.wasteTypewuran = {
            tooltip: {
              show: false,
            },
            legend: {
              show: false,
            },
            toolbox: {
              show: false,
            },
            series: [
              {
                name: "",
                type: "pie",
                clockWise: false,
                radius: [72, 74],
                hoverAnimation: false,
                data: data,
              },
            ],
          };
        }
      }
    },
    /* 3d图表 */
    get3dChart(data = this.chart3d) {
      var that = this;
      const Highcharts = require("highcharts");
      require("highcharts/modules/exporting")(Highcharts);
      require("@/assets/js/highcharts-3d.js")(Highcharts);
      Highcharts.chart("Gas", {
        legend: {
          enabled: false,
        },
        chart: {
          type: "pie",
          backgroundColor: "transparent",
          options3d: {
            enabled: true,
            alpha: 60,
          },
        },
        colors: ["#73a8ff", "#ff779b"],
        plotOptions: {
          pie: {
            innerSize: 60,
            depth: 28,
            slicedOffset: 24,
            dataLabels: {
              enabled: false,
            },
            cursor: "pointer",
            events: {
              click: function (event) {
                if (event.point.color === "#ff779b") {
                  that.$emit("showCbTable", true);
                }
              },
            },
          },
        },
        series: [
          {
            center: [76, 30],
            name: "",
            data: [
              {
                name: "达标率",
                y: 100 - this.outexceed.notPassNum,
              },
              {
                name: "超标率",
                y: this.outexceed.notPassNum,
              },
            ],
          },
        ],
      });
    },
  },
  watch: {
    outexceed: {
      handler() {
        this.get3dChart();
      },
      deep: true,
    },
    deviceData: {
      handler() {
        this.ititDevice();
      },
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.bottomWrap {
  position: absolute;
  z-index: 4;
  bottom: 28px;
  box-sizing: border-box;
  left: 5%;
  width: 90%;
  padding-bottom: 0px;
  padding-top: 0px;
  height: 28%;
  .bottomWrapCotent {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .bottomLeft {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .end-box {
      flex: 1;
      width: 100%;
      height: 80%;
      display: flex;
      align-items: center;
      .center_chart {
        margin-top: 7%;
        width: 60%;
        height: 100%;
        position: relative;
        background: url("~@/assets/images/admin/3Dchart_bg3.png") no-repeat;
        background-position: 50% 50%;
        background-size: 85% 39%;
        #Gas {
          height: 100%;
        }
      }
      .end-right {
        width: 40%;
        // padding-right: 38px;
        box-sizing: border-box;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .spot {
          width: 8px;
          height: 8px;
          border: 3px solid;
          margin-right: 12px;
        }
        .spot0 {
          @extend .spot;
          background-color: #609cff;
          border-color: #cddefe;
        }
        .spot1 {
          @extend .spot;
          background-color: #ff658d;
          border-color: #feccd9;
        }
      }
    }
  }
  .bottomline {
    width: 2px;
    height: 80%;
    background: #edf1f5;
    margin: 0px 32px;
  }
  .bottomRight {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .echart_right {
      flex: 1;
      width: 100%;
      height: 80%;
      display: flex;
      align-items: center;
      .center_chart {
        width: 50%;
        height: 100%;
      }
      .data-right {
        width: 50%;
        height: 100%;
        justify-content: center;
        .sum {
          width: 148px;
          height: 40px;
          text-align: center;
          line-height: 40px;
          background: #f5f6fa;
          border-radius: 4px;
        }
        .data-end-right {
          box-sizing: border-box;
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .status:nth-last-child(1) {
            margin-bottom: 0px !important;
          }
          .spot {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            width: 12px;
            height: 12px;
            margin-right: 12px;
          }
        }
      }
    }
  }
}
</style>
<style>
.highcharts-exporting-group,
.highcharts-credits,
.highcharts-title {
  display: none;
}
</style>